import React, { useState, useEffect } from 'react';
/*
  学习目标：useEffect===>模拟卸载
  步骤：
     1. 在useEffect里面返回一个箭头函数，表示该组件在卸载时触发
     2. 可以分开写，也可以合起来写
     3. 
*/
export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 在子组件中挂载时监听窗口改变事件
  const resizeFn = () => {
    console.log('scollWidth  ----->  ');
  };
  useEffect(() => {
    window.addEventListener('resize', resizeFn);
    // 卸载时触发
    return () => {
        console.log('卸载时触发');
        window.removeEventListener('resize', resizeFn);
      };
  }, []);
  //   卸载时触发
//   useEffect(() => {
    
//   }, []);
  return <div>我是子组件</div>;
}
